import { Inject, Injectable } from '../decorators/inject';
import { NExcel } from '../types';
import { Config } from './config';
import { DrawHelper } from '../utils/draw-helper';

@Injectable('Corner')
export class Corner {
    protected ctx: CanvasRenderingContext2D
    constructor(
        @Inject(NExcel.CanvasToken) protected canvasEle: HTMLCanvasElement,
        protected conf: Config,
    ) {

    }
    public init() {
        this.ctx = this.canvasEle.getContext('2d');
    }
    public renderBg() {
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.fillStyle="#f0f0f0";
        this.ctx.fillRect(0,0,this.conf.header.row.width,this.conf.header.col.height - 1);
        this.ctx.stroke();
        this.ctx.restore();
    }
    public render() {
        let drawLine = DrawHelper.line(this.ctx)({width: 1, type: 'solid', color: '#ccc'});
        let start = {x: this.conf.header.row.width, y: 0};
        let end = {x: this.conf.header.row.width, y: this.conf.header.col.height - 1};
        this.renderBg();
        drawLine(start, end);
        DrawHelper.pureDraw(this.ctx, () => {
            let size = 12;
            this.ctx.strokeStyle = '#c2bfbf';
            this.ctx.moveTo(this.conf.header.row.width - 2, this.conf.header.col.height - 3);
            this.ctx.lineTo(this.conf.header.row.width - 2, this.conf.header.col.height - 3 - size);
            this.ctx.lineTo(this.conf.header.row.width - 2 - size, this.conf.header.col.height - 3);
            this.ctx.fillStyle = "#c2bfbf";
            this.ctx.fill()
            this.ctx.closePath();
            this.ctx.clip();
        });
    }
}